<template>
	<hr class="two" />
	<h2>==== ShallowRef/Reactive 仅对 外层数据 启用页面响应式跟踪 ===</h2>
	<h4>当前的x.y值是：{{ x.y }}</h4>
	<button @click="x={y:888}">点我替换x</button>
	<button @click="x.y++">点我x.y++</button>
	<h4>{{ person }}</h4>
	<h4>姓名：{{ name }}</h4>
	<h4>年龄：{{ age }}</h4>
	<h4>薪资：{{ job.j1.salary }}K</h4>
	<button @click="name+='~'">修改姓名</button>
	<button @click="age++">增长年龄</button>
	<button @click="job.j1.salary++">涨薪</button>
</template>

<script>
import {ref, reactive, toRef, toRefs, shallowReactive, shallowRef} from 'vue'

export default {
	name: 'ShallowRefReactive',
	setup() {
		//数据
		// let person = shallowReactive({ //只考虑第一层数据的响应式
		let person = reactive({
			name: '张三',
			age: 18,
			job: {
				j1: {
					salary: 20
				}
			}
		})
/*
		// 测试基本数据
		let x = shallowRef(0) //值修改且视图更新，仅仅对第一层进行响应式
*/

		//测试对象:  //值修改且视图不更新 ：鸡肋 bug？ 在其他数据刷新时 视图会响应刷新(暂时不刷新)
		let x = shallowRef({
			y: 0
		})
		// console.log('ShallowRefReactive shallowRef（{y:0}） ', x)

		//返回一个对象（常用）
		return {
			x,
			person,
			...toRefs(person)
		}
	}
}
</script>

